<template>
	<div class="wos-page">
		<div class="main">
			<div class="wos-search-line wos-flex wos-flex-between">
				<div class="wos-flex">

				</div>
				<div class="wos-flex">
					<div @click="addnet = true" class="wos-hand">
						<i class="iconfont icon-jia wos-green"></i> &nbsp; 添加
					</div>
				</div>
			</div>
			<wos-table :record="net"></wos-table>
		</div>
		<div class="console">
			<button @click="refresh">刷新</button>
			<button @click="refresh">预检</button>
		</div>

		<div class="wos-model" v-show="addnet">
			<div class="cc" style="width: 800px;">
				<div class="wos-model-title wos-flex wos-flex-between">
					<div>添加</div>
					<div><i class="iconfont icon-x1" @click="addnet=false"></i></div>
				</div>
				<div class="content wos-flex">
					<div class="input-title">服务器IP:</div>
					<div style="width: 300px"><ip-input value=""></ip-input></div>
					<div class="input-title">端口:</div>
					<div style="width: 300px"><input :value="3260" type="text" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"></div>
				</div>
				<div class="content wos-flex">
					<div class="input-title">匿名:</div>
					<div>
						<a-switch :defaultChecked="check" />
					</div>
				</div>
				<div class="content wos-flex">
					<div class="input-title">用户名:</div>
					<div style="width: 300px"><input type="text"></div>
					<div class="input-title">密码:</div>
					<div style="width: 300px"><input type="password"></div>
				</div>
				<div class="content wos-flex">
					<div class="input-title">存储路径:</div>
					<div style="width: 300px"><button class="wos-btn ">查找路径</button>（3260-65535）</div>
				</div>
				<div class="table">
					<div style="height: 200px;border: 1px solid #E7E7E7;">
						<wos-table :record="addRecord" status="mini"></wos-table>
					</div>
				</div>

				<div class="btns wos-flex wos-flex-between">
					<div></div>
					<div>
						<button class="wos-btn wos-btn-no" @click="addnet = false">取消</button>
						<button class="wos-btn wos-btn-yes">确定</button>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>

    export default {
        name: "onlineusers",
        data:function(){
            return {
                check:false,
                net:"",
                addnet:false,
                addRecord:{
                    "thead": [
                        {
                            "type": "Checkbox",
                            "name": "序号"
                        },
                        {
                            "type": "String",
                            "name": "状态"
                        },
                        {
                            "type": "String",
                            "name": "IP地址"
                        }
                    ],
                    "tbody": [
                        [

                        ]
                    ]
                }
            }
        },
        beforeMount() {
            this.getData()
        },
        methods:{
            getData(){
                let that = this
                this.axios.get('/api/save/net.json')
                    .then(function (response) {
                        if( response.data.code == 200) {
                            that.net = response.data.data
                        }
                    })
                    .catch(function (error) {
                        that.$message.warn('服务器连接超时，请稍后重试')
                    });
            },
            refresh(){
                this.getData()
                this.jumpTop()
            },
	        add(){

	        }
        }
    }
</script>

